<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>liuboy.top 起点</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body{
            background:grey;
        }
        @media screen and (min-width:600px){
        #bigBlock{
            width:50%;
            margin:0 auto;
        }
        }
        #menu ul{
            list-style: none;
            /* border-top:1px solid blue;
            border-bottom:1px solid blue; */
            height:35px;
            background: white;
        }
        #menu ul li{
            float:left;
            padding:0 80px;
        }
        #menu ul li a{
            text-decoration: none;
            font-size:28px;
        }
        .blockHead{
            font-size:26px;
            background: white;
        }
        .blockBody{
            /* border:1px solid blue; */
            background: white;
        }
    </style>
</head>
<body>
    <div id="bigBlock">
        <ul>
            <li>
            <a href="lifeShare.html">生活分享</a> 
            </li>
            <li>
            <a href="pageShare.html">文章</a>
            </li>
            <li>
            <a href="#">网友留言</a>
            </li>
        </ul>
        当前位置：<a href="index.html">主页</a>
        <div id="lifeShare">
            <div class="blockHead">
                生活分享
            </div>
            <div class="blockBody">
            </div>
        </div>
        <div id="pageShare">
            <div class="blockHead">
                文章
            </div>
            <div class="blockBody">
            </div>
        </div>
        <div id="netfriendsShare">
            <div class="blockHead">
                网友留言
            </div>
            <div class="blockBody">
                内容
            </div>
        </div>
        <p style="color:white;" align="center">版权所有</p>
    </div>
</body>
<script>
    //通过ajax从服务器获取数据，将获取的string数据通过js转换成json,通过dom操作将数据动态写入页面
    function ajax(method,url,hs){
        var xmlhttp
        var res
        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest()
        }else{
            xmlhttp = new ActiveXObject("Microsoft XMLHTTP")
        }
        xmlhttp.open(method,url)
        xmlhttp.send();
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            res = JSON.parse(xmlhttp.responseText)
            hs(res)
            }
        }
    }
         ajax('get','lifeShareInfo.php',function fillLifeShare(res){
            var lifeShareContent = document.querySelector("#lifeShare .blockBody")
            console.log(lifeShareContent)
            for(i=0;i<res.length;i++){
            var p =document.createElement("p")
            p.innerHTML = res[i].content
            var span = document.createElement("span")
            span.innerHTML = res[i].datetime
            lifeShareContent.appendChild(p)
            lifeShareContent.appendChild(span)
            }
        })
        ajax('get','pageShareInfo.php',function(res){
            var pageShareContent = document.querySelector("#pageShare .blockBody")
            var ul = document.createElement("ul")
            for(i=0;i<res.length;i++){
            var li = document.createElement("li")
            var a = document.createElement("a")
            a.innerHTML = res[i].title
            a.href = "page.html?id="+res[i].id
            li.appendChild(a)
            ul.appendChild(li)
            }
            pageShareContent.appendChild(ul)
        })
        
    
   
</script>
</html>